<template>
    <view class="personal-container">
        <uni-list>
            <uni-list-item showArrow title="头像">
                <template v-slot:footer>
                   <view class="slot-image">
                   	<image
                   	    class="img" 
                   	    :src="avatarSrc" 
                   	  
                   	    @click="chooseImage"
                   	></image>
                   </view>
                </template>
            </uni-list-item>
            <uni-list-item showArrow title="昵称" rightText="潇洒的美男子" />
            <uni-list-item showArrow title="性别" rightText="男" />
            <uni-list-item showArrow title="手机号" rightText="13882406472" />
        </uni-list>
    </view>
</template>

<script>
export default {
    data() {
        return {
            avatarSrc: '/static/logo.png' // 初始图片路径
        };
    },
    methods: {
        chooseImage() {
            uni.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                    // tempFilePath可以作为img标签的src属性显示图片
                    const tempFilePaths = res.tempFilePaths;
                    this.avatarSrc = tempFilePaths[0];
                },
                fail: (err) => {
                    console.error('选择图片失败', err);
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
.personal-container {
    padding: 20rpx;

    .slot-image {
        border-radius: 50%;
        width: 100rpx;
		height: 100rpx;
		.img{
			  border-radius: 50%;
			width: 100%;
			height: 100%;
		}
    }
}

::v-deep .uni-list-item__content {
    justify-content: center;
}
</style>